<!DOCTYPE html>
<html lang="zh-hans-CN">
<head>
  <meta charset="UTF-8">
  <title>积分排行</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="../css/frozen.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="ui-tab cc-tab">
  <ul class="ui-tab-nav ui-border-b">
    <li class="current">积分排行</li>
    <li>推荐排行</li>
  </ul>
  <ul class="ui-tab-content" style="width:200%">
    <li class="current">
      <!-- 积分排行 start -->
      <article class="cc-ranking">
        <div class="cc-ranking-note">我目前的排行56名，当前23积分</div>
        <ul class="ui-list ui-list-function ui-border-b">
          <li class="ui-border-t">
            <div class="cc-list-l">1</div>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/b3.jpg)"></span>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="cc-list-r">当前积分：13465</div>
          </li>

          <li class="ui-border-t">
            <div class="cc-list-l">2</div>
            <div class="ui-avatar-s">
              <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="cc-list-r">当前积分：13465</div>
          </li>

          <li class="ui-border-t">
            <div class="cc-list-l">312</div>
            <div class="ui-avatar-s">
              <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="cc-list-r">当前积分：13465</div>
          </li>
        </ul>
      </article>
      <!-- 积分排行 end -->
    </li>
    <li>
      <!-- 推荐排行 start -->
      <article class="cc-ranking">
        <div class="cc-ranking-note">我目前的排行56名，当前23积分</div>
        <ul class="ui-list ui-list-function ui-border-b">
          <li class="ui-border-t">
            <div class="cc-list-l">1</div>
            <div class="ui-avatar-s">
              <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="cc-list-r">当前积分：13465</div>
          </li>

          <li class="ui-border-t">
            <div class="cc-list-l">2</div>
            <div class="ui-avatar-s">
              <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="cc-list-r">当前积分：13465</div>
          </li>

          <li class="ui-border-t">
            <div class="cc-list-l">312</div>
            <div class="ui-avatar-s">
              <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="cc-list-r">当前积分：13465</div>
          </li>
        </ul>
      </article>
      <!-- 推荐排行 end -->
    </li>
  </ul>
</div>
<script src="../lib/zepto.min.js"></script>
<script src="../js/frozen.js"></script>
<script src="../js/main.js"></script>
<script>
  (function () {
    cc.pro.ranking();
  })();
</script>
</body>
</html>